<?php 
$article = $this->article;
$articleDts = $this->articleDts;
$minOrderArticleDtID = $this->minOrderArticleDtID;
$maxOrderArticleDtID = $this->maxOrderArticleDtID;
if(isset ($minOrderArticleDtID)==false) $minOrderArticleDtID = 0;
if(isset ($maxOrderArticleDtID)==false) $maxOrderArticleDtID = 0;
$viewMode = $this->viewMode;
$categories = $this->categories;

include_once 'utils.php';
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Show article</title>

<script src="<?php echo $this->baseUrl();?>/jquery/jquery-1.6.2.js"></script>
<script type="text/javascript">
    $("document").ready(OnPageReady);
    function OnPageReady()
    {
        $("#editor").hide();
        $("#toolbar").hide();
        $("#image-editor").hide();
        $("#d-edit-title").hide();
        $("#d-edit-cat").hide();
        
        <?php if($viewMode=='admin'){ ?>
        //Tạo background đen mờ
        function BlackBackground()
        {
            $(".background").show();
            $(".background").css("width", $(document).width());
            $(".background").css("height", $(document).height());
            $(".background").css("opacity", "0.3");
        }
        
        //Hiện Toolbar
        function ShowToolbar(elemID)
        {
            
            var offset = $("#"+elemID).offset();
            
            //Xử lý hai ẩn nút Lên hoặc Xuống
            $("#up").show();
            $("#down").show();
            var id = elemID.substr(1);
            if(id==<?php echo $minOrderArticleDtID?>)
                $("#up").hide();
            else if(id  ==<?php echo $maxOrderArticleDtID?>)
                $("#down").hide();
                
            $("#toolbar").css("top", offset.top);
            $("#toolbar").css("left", offset.left);
            $("#toolbar").show();
        }
        
        function ShowEditor(elem)
        {
            $("#editor").show();
            var offset = elem.offset();
            $("#editor").css("top",offset.top);
            setContentForRichTextbox(elem.html());
            BlackBackground();
        }
        
        $(".text").dblclick(function(){
            $("#action").val("edit-text");
            
            //Hiện editor, làm mờ background
            ShowEditor($(this));

            $(this).css("background-color", "yellow");
        });
        
        function RemoveFormatWhenDragMouse()
        {
            $("#toolbar").hide();
            $(".text, .image, #title, #category").css("border","none");
        }
        $(".text, .image").mouseover(function()
        {
            RemoveFormatWhenDragMouse();
            $(this).css("border","dotted 1px red");
            
            //Lấy ID của đối tượng đang được chỉnh sửa.
            var strID = $(this).attr("id");
            var id = strID.substr(1);
            $("#article-dt-id").val(id);
            
            ShowToolbar($(this).attr("id"));
            
        });
        $("#title, #category").mouseover(function(){
            RemoveFormatWhenDragMouse();
            $(this).css("border","dotted 1px red");
        });
        
        //Nhấn nút lưu text
        $("#bSaveText").click(function(){
            getContentToHiddenInput();
            $('#pressed-id').val('bSaveText');
            $('#main-form').attr("action",$(location).attr("href"));
            $('#main-form').submit();
            return true;
        });
        
        //Nhấn nút hủy lưu text.
        $("#bCancelSaveText").click(function(){
            $("#editor").hide();
            $(".background").hide();
            var sEdittingID = "#t"+$("#article-dt-id").val();
            $(sEdittingID).css("background-color", "transparent");
        });
        
        //Nhấn nút up
        $("#up, #down").click(function(){
            $('#pressed-id').val($(this).attr("id"));
            $('#main-form').attr("action",$(location).attr("href"));
            $('#main-form').submit();
            return true;
        });
        
        //Nhấn nút down
        $("#up").click(function(){
            $('#pressed-id').val('up');
            $('#main-form').attr("action",$(location).attr("href"));
            $('#main-form').submit();
            return true;
        });
        
        //Nhấn nút thêm text
        $("#add-text").click(function(){
            $("#action").val("add-text");
            ShowEditor($(this));
        });
        
        //Nhấn nút thêm văn bản lên trên cùng
        $("#add-text-top").click(function(){
            $("#action").val("add-text-top");
            ShowEditor($(this));
        });
        
        //Nhấn nút xóa đoạn
        $("#delete").click(function(){
            if(!confirm('Bạn có chắc muốn xóa đoạn này không ?')) return;
            $('#pressed-id').val('delete');
            $('#main-form').attr("action",$(location).attr("href"));
            $('#main-form').submit();
        });
        
        //Sự kiện khi đổi link ảnh trong image editor
        $("#image-link").change(function(){
            $("#show-image").attr("src",$(this).val());
        });
        
        function ShowImageEditor(elem)
        {
            $("#image-editor").show();
            var offset = elem.offset();
            $("#image-editor").css("top",offset.top);
            //Gán giá trị khi ở chế độ edit
            var strID = elem.attr("id");
            var id = strID.substr(1);
            var imgSrcElem = $("#j"+id);
            var imgDesElem = $("#k"+id);
            $("#show-image").attr("src", imgSrcElem.attr("src"));
            $("#image-link").val(imgSrcElem.attr("src"));
            $("#image-des").val(imgDesElem.text());
            
            BlackBackground();
        }
        
        //Nhấn nút hủy lưu hình ảnh.
        $("#cancel-save-image").click(function(){
            $("#image-editor").hide();
            $(".background").hide();
            var strID = "#i"+$("#article-dt-id").val();
            $(strID).css("background-color", "transparent");
        });
        
        //Nhấn nút lưu hình ảnh
        $("#save-image").click(function(){
            $('#pressed-id').val('save-image');
            $('#main-form').attr("action",$(location).attr("href"));
            $('#main-form').submit();
            return true;
        });
        
        //Click đôi vào image
        $(".image").dblclick(function(){
            $("#action").val("edit-image");
            ShowImageEditor($(this));
            $(this).css("background-color", "yellow");
        });
        
        //Nhấn nút thêm image xuống dưới
        $("#add-image").click(function(){
            $("#action").val("add-image");
            ShowImageEditor($(this));
        });
        
        //Thêm image trên cùng
        $("#add-image-top").click(function(){
            $("#action").val("add-image-top");
            ShowImageEditor($(this));
        });
        
        //Click đôi vào title
        $("#title").dblclick(function(){
            $("#d-edit-title").show();
            $("#t-edit-title").val($("#title").text());
            $(this).hide();
        });
        
        //Nhấn lưu tiêu đề
        $("#b-edit-title").click(function(){
            $('#pressed-id').val('b-edit-title');
            $('#main-form').attr("action",$(location).attr("href"));
            $('#main-form').submit();
        });
        
        //Nhấn hủy lưu tiêu đề
        $("#b-cancel-edit-title").click(function(){
            $("#title").show();
            $("#d-edit-title").hide();
        });
        
        //Click đôi vào chuyên mục
        $("#category").dblclick(function(){
            $("#d-edit-cat").show();
            $(this).hide();
        });
        
        //Nhấn lưu chuyên mục
        $("#b-edit-cat").click(function(){
            $('#pressed-id').val('b-edit-cat');
            $('#main-form').attr("action",$(location).attr("href"));
            $('#main-form').submit();
        });
        
        //Nhấn hủy lưu chuyên mục
        $("#b-cancel-edit-cat").click(function(){
            $("#category").show();
            $("#d-edit-cat").hide();
        });
        
        <?php } //END if($viewMode=='admin')?> 
    }
</script>
</head>

<body>
    <div class="background" style="position: absolute; background-color: black;" ></div>
    <div class="wrapper">
    <form id="main-form" method="post">
        <?php if($viewMode=='admin'){ ?>
        
        <!-- Top Toolbar -->
        <div class="top-toolbar">
            <input type="button" class="toolbar-item" id="add-text-top" value="Thêm VB trên cùng"/>
            <input type="button" class="toolbar-item" id="add-image-top" value="Thêm ảnh trên cùng"/>
            <input type="button" class="toolbar-item" id="article-manager" value="Quản lý" onclick="location.href='manager'"/>
        </div>
        
        <?php } //END if($viewMode=='admin')?>
    <?php
        //Tiêu đề
        echo '<div id="title"><b>'.$article['Title'].'</b></div>';
        if($viewMode=='admin'){
            echo '<div id="d-edit-title" style="border:solid red 1px;">Nhập vào tiêu đề ';
                echo '<input type="text" id="t-edit-title" name="t-edit-title"/>';
                echo '<input type="button" id="b-edit-title" value="Lưu"/>';
                echo '<input type="button" id="b-cancel-edit-title" value="Hủy"/>';
            echo '</div>';
        }
        
        //Chuyên mục
        echo '<div id="category">Chuyên mục :<span id="category-name">'.$article['CategoryName'].'</span></div>';
        if($viewMode=='admin'){
            echo '<div id="d-edit-cat" style="border:solid red 1px;">Chọn chuyên mục ';
                echo '<select name="s-category" id="s-category">';
                    AddCategory($categories, 1, 0);
                echo '</select>';
                echo '<input type="button" id="b-edit-cat" value="Lưu"/>';
                echo '<input type="button" id="b-cancel-edit-cat" value="Hủy"/>';
            echo '</div>';
        }
        echo '<i>'.$article['CreatedTime'].'</i><br/>';
        foreach($articleDts as $articleDt)
        {
            if($articleDt['ImageURL']!='')
            {
                echo "<div class=\"image\" id=\"i{$articleDt['ID']}\"><p>";
                echo "<img id=\"j{$articleDt['ID']}\" src=\"{$articleDt['ImageURL']}\"></img><br/>";
                echo "<i id=\"k{$articleDt['ID']}\">{$articleDt['Content']}</i>";
                echo '</p></div>';
            }
            else
            {
                echo "<div class=\"text\" id=\"t{$articleDt['ID']}\">";
                echo "<p>{$articleDt['Content']} </p>";
                echo '</div>';
            }
        }
    ?>
    
    <?php if($viewMode=='admin'){ ?>
    <input type="hidden" id="article-dt-id" name="article-dt-id"/>
    <input type="hidden" id="pressed-id" name="pressed-id"/>
    <input type="hidden" id="action" name="action"/>

    <!-- Toolbar -->
    <div id="toolbar" style="position:absolute; background-color: lightcyan; width: 600px; border: solid 1px blue;">
        <input type="button" class="toolbar-item" id="up" value="Lên"/>
        <input type="button" class="toolbar-item" id="down" value="Xuống"/>
        <input type="button" class="toolbar-item" id="add-text" value="Thêm VB dưới"/>
        <input type="button" class="toolbar-item" id="add-image" value="Thêm ảnh dưới"/>
        <input type="button" class="toolbar-item" id="delete" value="Xóa đoạn"/>
    </div>
    <!-- Toolbar END-->
    
    <!-- Image add -->
    <div id="image-editor" style="position:absolute; background-color: lightcyan; border: solid 1px blue;">
        <img id="show-image"></img><br/>
        Link hình ảnh <input type="text" id="image-link" name="image-link"></input><br/>
        Mô tả <input type="text" id="image-des" name="image-des"></input><br/>
        <input type="button" id="save-image" value="Lưu"></input>
        <input type="button" id="cancel-save-image" value="Hủy"></input>
    </div>
    <!-- Image add END -->
    
    <!-- Editor -->
    <?php $imagePath = $this->baseUrl()."/Images/RTE"; ?>
    <div id="editor" style="position:absolute; left: 100px;">
         <table border="0" cellpadding="0" cellspacing="1" bgcolor="#e1f2ff">
            <tr height="20">
                <td>
                    <img src="<?php echo $imagePath;?>/bold.gif" title="Bold" onclick="doFormat('bold');"/>
                    <img src="<?php echo $imagePath;?>/italic.gif" title="Italic" onclick="doFormat('italic');"/>
                    <img src="<?php echo $imagePath;?>/underline.gif" title="Underline" onclick="doFormat('underline');"/>
                    <img src="<?php echo $imagePath;?>/link.gif" title="Hyperlink" onclick="addLink();"/>
                    <img src="<?php echo $imagePath;?>/removeformatting.gif" title="Remove Formatting" onclick="unformat();"/> 
                </td>

            </tr>
            <tr>
                <td align="center" bgcolor="#ffffff">
                    <iframe id="textArea" style="width:600px;overflow:auto;"></iframe>
                </td>
            </tr>
            <tr><td>
                <input type="hidden" id="mycontent" name="mycontent"/>
                <input type="button" id="bSaveText" value="Lưu" />
                <input type="button" id="bCancelSaveText" value="Hủy" />
            </td></tr>
        </table>
    </div>
    <script type="text/javascript">
    var editor = document.getElementById('textArea').contentWindow.document;
    editor.designMode='On';
    editor.open();
    editor.write('<html><head></head><body></body></html>');
    editor.close();

    function doFormat(a,b){
      if(editor.queryCommandEnabled(a)){
        if(!b){b=null;}
            editor.execCommand(a,false,b);
      }
    }
    function addLink(){
      var aLink=prompt('Enter a link :', '');
        if(aLink){
            doFormat('CreateLink',  aLink);
        }
    }

    function unformat(){
        doFormat('removeformat');
        doFormat('unlink');
    }

    function getContentToHiddenInput(){
        document.getElementById('mycontent').value=this.editor.body.innerHTML;
    }

    function setContentForRichTextbox(content){
        this.editor.body.innerHTML=content;
    }
    </script>
    <!-- Editor END -->
    <?php } //END if($viewMode=='admin')?>
    
    </form>
    </div>
</body>
    
</html>